<template>
	<div class="xiang-you-quan">
		<!-- 视频 -->
		<div class="header">
			<div class="list">
				<div class="box" @click="playVideo(item)" v-for="(item, index) in video" :key="index">
					<div class="video-box" @click="playVideo(item)">
						<el-image :src="item.img" fit="cover" />
						<IEpVideoPlay color="#fff" />
					</div>
					<span>{{ item.name }}</span>
				</div>
			</div>

			<div class="footer">
				<el-button>上一页</el-button>
				<span>1/5</span>
				<el-button>下一页</el-button>
			</div>
		</div>

		<!-- 热门游记 -->
		<div class="hot-note">
			<div class="hot-header">
				<p>热门游记</p>
				<el-button color="#8A1313">写游记</el-button>
			</div>

			<!-- 邮寄内容 -->
			<div class="list">
				<div class="list-item" @click="pageJump('/news-detail', { id: i.id })" v-for="(i, index) in noteList" :key="index">
					<div class="item-title">{{ i.title }}</div>
					<div class="item-content">{{ i.content }}</div>
					<div class="item-avatar">
						<el-image :src="i.avatar" style="width: 32px; height: 32px; margin-right: 10px; border-radius: 50%" fit="cover"></el-image>
						<span>{{ i.name }}</span>
					</div>
				</div>
			</div>

			<!-- 分页 -->
			<div class="footer">
				<el-button>上一页</el-button>
				<span>1/5</span>
				<el-button>下一页</el-button>
			</div>
		</div>

		<!-- 评论 -->
		<div class="container-box">
			<div class="send-box">
				<div class="chat-box">
					<div class="box" v-for="(item, index) in list" :key="index">
						<span class="name">{{ item.name }}</span>

						<div class="content">
							<span>{{ item.content }}</span>
							<el-image v-if="item.img" :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
						</div>
						<div class="date">
							<span> {{ item.date }} </span>
							<span> <IFa6RegularThumbsUp /> 15</span>
						</div>
					</div>
				</div>

				<div class="footer">
					<el-button>上一页</el-button>
					<span>2/5</span>
					<el-button>下一页</el-button>
				</div>
			</div>
		</div>
	</div>
	<!-- 播放器 -->
	<PreviewVideo ref="PVVideoRef" :video="preVideo" />
</template>
<script setup lang="ts" name="XiangYouQuan">
import PreviewVideo from "@/components/PreviewVideo/index.vue";
import { PVideo } from "@/components/interface";
import { useVR } from "@/hook/useVR";
import { useBaseStore } from "@/store/base";
import { useI18n } from "vue-i18n";

const { pageJump } = useVR();

const { cosPrefix } = useBaseStore();
const i18n = useI18n();

const video = [
	{
		name: "人民日报社重庆分社社长王斌来调研归原小镇",
		img: cosPrefix + "three-level/xiangmeng/xiangyoujiaoliu/1.png",
		src: cosPrefix + "three-level/xiangmeng/xiangyoujiaoliu/1.mp4"
	},
	{ name: "凡策控股重庆公司董事长  范鲁峰", img: cosPrefix + "three-level/xiangmeng/xiangyoujiaoliu/2.png", src: cosPrefix + "three-level/xiangmeng/xiangyoujiaoliu/2.mp4" },
	{ name: "博象文旅集体董事长  陈博洲 ", img: cosPrefix + "three-level/xiangmeng/xiangyoujiaoliu/3.png", src: cosPrefix + "three-level/xiangmeng/xiangyoujiaoliu/3.mp4" },
	{ name: "自驾达人 许秉宽", img: cosPrefix + "three-level/xiangmeng/xiangyoujiaoliu/4.png", src: cosPrefix + "three-level/xiangmeng/xiangyoujiaoliu/4.mp4" }
];
const list = [
	{ name: "小徐小徐是条咸鱼", date: "07-01 22:23", content: "今天去无有图书馆又看书又喝了咖啡，真的巴适！", img: "" },
	{ name: "墨迹的罗夏", date: "02-27 11:52", content: "悬崖餐厅的美食配美景，哈哈哈", img: "" },
	{ name: "小周小周招待不周", date: "07-01 22:23", content: "帅气的小哥哥们快来买我们的苕粉。", img: "" },
	{ name: "从众的阿希", date: "07-01 22:23", content: "挖了一天的田土，看看大家发了什么好玩的。", img: "" }
];

const noteList = computed(() => [
	{
		name: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.name"),
		avatar: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangmeng/xiangyoujiaoliu/avatar.jpg",
		title: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.title"),
		content: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.desc")
	},
	{
		id: 1,
		name: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.name2"),
		avatar: cosPrefix + "three-level/xiangmeng/xiangyoujiaoliu/avatar.jpg",
		title: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.title2"),
		content: i18n.t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.desc2")
	}
]);

const preVideo = ref<PVideo>({ title: "", src: "" });
const PVVideoRef = ref<InstanceType<typeof PreviewVideo>>();
const playVideo = (item: any) => {
	preVideo.value = { title: item.name, src: item.src };
	PVVideoRef.value.play();
};
</script>
<style lang="scss" scoped>
.xiang-you-quan {
	.container-box {
		padding: 40px 320px;
		background-color: #f7f7f7;
		.send-box {
			padding: 40px 0;
			text-align: center;
			background-color: #ffffff;
			.chat-box {
				margin: 0 40px;
				.box {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					padding-bottom: 20px;
					margin-top: 20px;
					border-bottom: 1px solid #f7f7f7;
					.name {
						font-family: SourceSerif;
						font-size: 18px;
						font-weight: bold;
						color: $theme-color;
					}
					.content {
						display: flex;
						flex-direction: column;
						margin-top: 10px;
						font-size: 18px;
						color: rgb(25 25 25 / 100%);
						span {
							text-align: left;
						}
						.el-image {
							width: 96px;
							height: 72px;
							margin-top: 10px;
						}
					}
					.date {
						display: flex;
						justify-content: space-between;
						width: 100%;
						margin-top: 10px;
						font-size: 16px;
						color: #bbbbbb;
						span {
							&:last-child {
								display: flex;
								align-items: center;
								color: #8a1313;
							}
						}
					}
				}
			}
		}
		.footer {
			display: flex;
			justify-content: center;
			margin-top: 40px;
			span {
				display: inline-block;
				width: 160px;
				text-align: center;
			}
		}
	}
}
.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px;
	.list {
		display: flex;
		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 305px;
			margin-right: 20px;
			font-size: 16px;
			color: #101010;
			&:last-child {
				margin-right: 0;
			}
			.el-image {
				width: 100%;
				height: 165px;
				margin-bottom: 10px;
			}
		}
	}
	.footer {
		display: flex;
		justify-content: center;
		margin-top: 40px;
		span {
			display: inline-block;
			width: 160px;
			text-align: center;
		}
	}
}
.hot-note {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: 0 320px;
	padding-bottom: 40px;
	.hot-header {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 70px;
		text-align: center;
		border-bottom: 1px solid #f7f7f7;
		p {
			width: 120px;
			margin: 0 auto;
			font-size: 20px;
			border-bottom: 4px solid #8a1313;
		}
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		justify-content: space-between;
		margin-top: 32px;
		.list-item {
			flex: 1;
			min-width: 630px;
			max-width: 630px;
			margin-bottom: 41px;
			cursor: pointer;
			.item-title {
				font-size: 20px;
				&:hover {
					color: rgb(41 88 192);
					text-decoration: underline;
				}
			}
			.list {
				margin-top: 10px;
				margin-bottom: 20px;
				font-size: 16px;
				color: #666666;
			}
		}
	}
	.footer {
		display: flex;
		justify-content: center;
		span {
			display: inline-block;
			width: 160px;
			text-align: center;
		}
	}
}

@media all and (max-width: 750px) {
	.xiang-you-quan {
		.header {
			padding: 16px;
			.list {
				flex-wrap: wrap;
				.box {
					width: 47.5%;
					margin-right: 5%;
					margin-bottom: 10px;
					&:nth-child(2n) {
						margin-right: 0;
					}
					.el-image {
						width: 100%;
					}
				}
			}
		}
		.hot-note {
			width: 100%;
			padding: 0;
			.hot-header {
				padding: 0 1rem;
			}
		}
		.list {
			width: 100%;
			padding: 16px;
			margin-top: 0;
			.list-item {
				width: 100%;
				min-width: 100%;
				max-width: 100%;
				padding: 16px;
				margin-top: 16px;
				margin-bottom: 0;
				cursor: pointer;
				border: 1px solid #cccccc;
				border-radius: 4px;
				.item-title {
					font-size: 16px;
					font-weight: bold;
					&:hover {
						color: rgb(41 88 192);
						text-decoration: underline;
					}
				}
				.item-content {
					margin-top: 4px;
					margin-bottom: 6px;
					font-size: 14px;
					color: #666666;
				}
				.item-avatar {
					display: flex;
					align-items: center;
					font-size: 14px;
					.el-image {
						width: 24px !important;
						height: 24px !important;
					}
				}
			}
		}
		.container-box {
			padding: 16px;
		}
	}
}
</style>
